<template>
    <div>
        <Row>
            <Card>
                <div class="fitter-panel">

                    <p>申请时间</p>
                    <DatePicker type="daterange" v-model="created_at" placement="bottom-end" placeholder="注册时间"
                                style="width: 200px"></DatePicker>

                    <div style="flex: 1">

                    </div>
                    <i-button @click="loadUsers()" type="primary" icon="search" style="margin-left: 16px;">搜索</i-button>
                </div>

                <div class="button-group-panel">

                </div>
                <div class="table-content">
                    <Table @on-selection-change="changeSelection" no-data-text="没有符合条件的用户信息"
                           :loading="loading" border :columns="columns" :data="checks"></Table>

                </div>
                <div style="margin: 10px;">
                    <Page @on-page-size-change="changePageSize" :pageSize="size" :current.sync="page"
                          @on-change="changePage" :total="total" show-elevator show-sizer></Page>
                </div>
            </Card>
        </Row>
    </div>
</template>
<script type="text/jsx">
  import axios from 'axios'
  import url from '../../config/url'
  import time from '../../libs/time'
  import utils from '../../libs/util'

  export default {

    name: 'user_update_check',
    data () {
      return {
        columns: [

          {
            title: '审核单号',
            width: 180,
            align: 'center',
            key: 'check_no'
          },
          {
            title: '头像',
            width: 80,
            align: 'center',
            key: 'avatar',
            render: (h, params) => {
              return h('div', [
                h('Avatar', {
                  props: {
                    src: params.row.avatar
                  }
                })
              ])
            }
          },
          {
            title: '真实姓名',
            width: 100,
            align: 'center',
            key: 'true_name'
          },
          {
            width: 120,
            title: '手机',
            align: 'left',
            key: 'phone'
          },
          {
            title: '工种',
            align: 'center',
            width:240,
            key: 'service_types',
            render: (h, params) => {
              const self = this
              let color = 'blue'
             let tags = params.row.service_types_array.map((item) =>
                 <tag type="border" color={color}>{item.name}</tag>
              );
              return tags;
            }
          },
          {
            title: '地址',
            align: 'left',
            key: 'address'
          },
          {
            width: 120,
            title: '坐标',
            align: 'left',
            key: 'location_format'
          },

          {
            width: 160,
            title: '申请时间',
            key: 'created_at'
          },
          {
            width: 160,
            title: '审核时间',
            key: 'checked_at'
          },
          {
            width: 120,
            title: '状态',
            key: 'status',
            render: (h, params) => {
              const self = this
              let color = 'blue'
              switch (params.row.status) {
                case 0:
                  color = 'default'
                  break
                case 1:
                  color = 'green'
                  break
                case 2:
                  color = 'red'
                  break
              }
              return (
                      <div>
                          <tag type="border" color={color}>{params.row.status_label}</tag>
                      </div>
              )
            }
          },
          {
            title: '操作',
            width: 140,
            key: 'action',
            render: (h, params) => {

              return (
                      <div>
                          <i-button onClick={() => {
                            this.editClick(params.row.id,params.row)
                          }} size="small" type="info">查看详情
                          </i-button>
                      </div>
              )
            }
          }
        ],
        loading: false,
        showCreate: false,
        keyword: '',
        created_at: [],
        checks: [],
        page: 1,
        size: 10,
        total: 0,
        multipleSelection: [],
      }
    },
    mounted () {
      this.loadUsers()
    },
    methods: {
      editClick (id,item) {
        utils.openNewPage(this, 'user_update_check_detail', {id: id,item:item})
        this.$router.push({name: 'user_update_check_detail', params: {id: id,item:item}})
      },
      handleAdd () {
        utils.openNewPage(this, 'user_manager_add')
        this.$router.push('/user/add')
      },
      changePage (value) {
        this.loadUsers()
      },

      changePageSize (value) {
        this.size = value
        this.loadUsers()
      },
      changeSelection (selection) {
        this.multipleSelection = selection
      },

      handleStatus (status) {
        if (this.multipleSelection.length === 0) {
          this.$Message.error('请选择所选项目')
          return
        } else {
          this.loading = true
          let ids = []
          this.multipleSelection.forEach((item) => {
            ids.push(item.id)
          })
          $api.post(`${url.user}/check`, {status: status, ids: ids}).then((res) => {
            this.loading = false
            this.$Message.success('修改成功')
            this.loadUsers()
          }).catch((error) => {
            this.loading = false
            console.log(error)
          })
        }

      },
      handleDeleteSelect () {
        if (this.multipleSelection.length === 0) {
          this.$Message.error('请选择所选项目')
          return
        } else {
          this.$Modal.confirm({
            title: '提示',
            content: '此操作将删除该所选用户, 是否继续?',
            onOk: () => {
              this.loading = true
              let ids = []
//
              this.multipleSelection.forEach((item) => {
                ids.push(item.id)
              })
              $api.post(`${url.user}/delete`, {ids: ids}).then((res) => {
                this.loading = false
                if (res.status) {

                  this.$Message.success('删除成功')
                  this.loadUsers()
                }
              }).catch((error) => {
                this.loading = false

              })
            },
            onCancel: () => {
              this.$Message.info('操作已取消')
            }
          })

        }

      },

      deleteClick (id) {
        $api.delete(`${url.check}/${id}`).then((res) => {
          if (res.status) {
            this.$Message.success('删除成功')
            this.loadUsers()
          }
        })
      },
      loadUsers () {
        this.loading = true
        let params = {page: this.page, size: this.size}

        if (this.created_at.length > 0) {
          params.start_at = this.created_at[0]
          params.end_at = this.created_at[1]
        }
        $api.get(url.check, {
          params: params
        }).then((res) => {
          this.loading = false
          let results = []
          this.page = res.page.current
          this.total = res.page.total
          res.data.forEach((item) => {
            item.visible = false
            item.true_name = item.info.true_name
            item.phone = item.user.phone
            item.address = item.info.address
            item.location_format = item.info.location.toString()
            results.push(item)
          })
          this.checks = results
          console.log(results)
        }).catch((error) => {
          console.log(error)
          this.loading = false
        })
      },
      toggleStatus (value, id) {
        console.log(value, id)
        this.loading = true
        $api.put(`${url.user}/${id}`, {status: value ? 1 : 0}).then((res) => {
          this.loading = false
          if (res.status) {
            this.$Message.success('修改成功')
          }
        }).catch((error) => {
          console.log(error)
        })
      }
    }


  }
</script>
<style lang="less">
    .fitter-panel {
        background: #f0f0f0;
        padding: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        p {
            font-size: 12px;
            margin-left: 12px;
            margin-right: 12px;
        }
    }

    .button-group-panel {
        margin-top: 12px;
    }

    .table-content {
        margin-top: 12px;
    }
</style>